<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>费用计算</title>
<style>
        #outer{
        	margin:auto;
            width: 800px;
            height: 535px;
            background-color: #999999;
            border: solid black 1px;
            
        }
        #outer-in{
            height: 366px;
            width: 99%;
            border: solid 0px black;
            margin-top: 50px;
            background-color: white;
        }
        #outer-in #left{
            width: 200px;
            height: 100%;
            border: solid 0px black;
            float: left;
        }
        #outer-in #right{
            width: 578px;
            height: 100%;
            border: solid 1px black;
            float: right;
/*             overflow-y: auto;
			_overflow: auto; */
        }
        #outer-in #left .left-top{
            width: 100%;
            height: 22px;
            border: solid 0px black;
            float: left;
        }
        #outer-in #left .left-top input{
            width: 60%;
            height: 78%;
            float: left;
            margin-top: 1px;
            text-align: center

        }
        #outer-in #left .left-top select{
            width: 37%;
            height: 100%;
        }

        #outer-in #left #left-bottom{
            width: 100%;
            height: 274px;
            border: solid 1px black;
            float: left;
        }
        #left-bottom table{
            border-collapse:collapse;
            border-spacing: 0px;
            width:100%;
            margin: auto;
            font-size: small;
        }
        #left-bottom td{
            text-align: center;
            border: solid black 1px;
        }
        #left #left-page{
            width:200px;
            height: 24px;
            border: solid 1px gold;
            position: absolute;
            top: 396px;
        }

        #left #left-page .left-page{
            width: 33%;
            height: 100%;
            float: left;
            text-align: center;
        }
        
        #left #left-page .left-page button{
        	width: 100%;
        }
        #right #right-top{
            width: 100%;
            height: 26px;
            border: solid 1px springgreen;
        }
        #right-top .right-top{
            float: left;
            height: 100%;
            width: 117px;
            border: solid 0px salmon;
        }
        button{
            width: 117px;
            height: 100%;
        }
        #right table{
            border-collapse:collapse;
            border-spacing: 0px;
            width:577px;
            margin: auto;
            font-size: x-small;
        }
        #right table td{
            text-align: center;
            white-space:nowrap;
            border: solid 1px black;
        }
		#right table td input {
            width: 97%;
        }
        #right #right-middle{
            width: 80%;
            height: 24px;
            border: solid 0px gold;
            position: absolute;
            top: 382px;
            font-size: small;
        }
        #right #right-middle div{
        	float: left;
        }
        #right input[type=submit]{
            margin-left: 100px;
            width: 100px;
        }
        #right #right-middle input[type=text]{
            text-align: center;
            width: 100px;
            height: 20px;
            margin-left: 100px;
        }
    </style>
 	<script type="text/javascript" src="../JS/jquery.1.9.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/JS/public/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
 	<div id="outer">
        <div id="outer-in">
            <div id="left">
                 <div class="left-top">
	                <input type="text" value="所属大楼">
	                <select name="inhabitant_House.block" class="block">
	                    <option value="'A'">A</option>
	                    <option value="'B'">B</option>
	                    <option value="'C'">C</option>
	                    <option value="'D'">D</option>
	                    <option value="'E'">E</option>
	                </select>
	            </div>
	            <div class="left-top">
	                <input type="text" value="单元号">
	                <select name="inhabitant_House.unit" class="unit">
	                    <option></option>
	                    <option value="1">1单元</option>
	                    <option value="2">2单元</option>
	                    <option value="3">3单元</option>
	                </select>
	            </div>
	            <div class="left-top">
	                <input type="text" value="房间号">
	                <select name="inhabitant_House.room_number" class="room_number">
	                    <option></option>
	                    <option value="101">101</option>
	                    <option value="102">102</option>
	                    <option value="103">103</option>
	                    <option value="104">104</option>
	                    <option value="201">201</option>
	                </select>
	            </div >
	            <div class="left-top" style="height: 26px">
	                <input type="submit" value="筛选" style="width: 99%" onclick="selectH_id(3)">
	            </div> 
	       		<!-- 该div通过Ajax引入selectTable.jsp页面 -->
	            <div id="left-bottom"></div>
            </div>


            <div id="right">
                <div id="right-top">
                    <div class="right-top"><button>住户费用计算</button></div>
                </div>
                <table id="user" >
                    <tr>
                        <td>房间代码</td>
                        <td>数据年月</td>
                        <td>项目名称</td>
                        <td>计算用量</td>
                        <td>收费标准/元</td>
                        <td>费用/元</td>
                        <td>备注</td>
                    </tr>
                    <tr id="appendUser">
                        <td class="addh_id" id="addinputh_id" style="width: 60px;"></td>
                        <td class="hide"><input name="waterAndElectricity.this_date" class="Wdate" type="text" onClick="WdatePicker()"></td>
                        <td class="hide">水费</td>
                        <td class="hide"><input type="number" name="waterAndElectricity.last_water_amount" id="last_water_amount"></td>
                        <td class="hide"></td>
                        <td class="hide" id="conut_water" style="width: 60px;"></td>
                        <td class="hide"><input type="text"></td>
                    </tr>
                </table>
                <div id="right-middle">
                    <div><input type="submit" value="计算"></div>
                    <div style="margin-left:100px">
                    	   费用合计：
                 		 <input type="text" value="" style="margin-left: 0px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

	<script type="text/javascript" src="../JS/selectH_id.js"></script>
</html>